<script setup lang="ts">
import { STORAGE_MODES_OPTIONS } from '@/mixins/StatisticalIndicators/MixinStatisticalIndicators'

import {
  STORAGE_MODES,
} from '@/enum/modules/indicator'
import type { StatisticalIndicator } from '@/types/modules/statistical-indicator'

const props = defineProps<{
  mode: StatisticalIndicator['storageMode']
}>()

const data = computed(() => {
  const mode = unref(props.mode)
  /** 时间类型的反选 */
  const result: {
    collect: string[]
    entry: string[]
    calculate: string[]
    statistic: string[]
  } = {
    collect: [],
    entry: [],
    calculate: [],
    statistic: [],
  }
  for (const key in mode) {
    const data
      = mode[
        key as keyof StatisticalIndicator['storageMode']
      ]
    result[key as keyof typeof result] = data.map(v =>
      getLabel(v),
    )
  }
  return result
})

const TIME_TYPES: [STORAGE_MODES, string][] = [
  [STORAGE_MODES.NOW, '实时'],
  // [STORAGE_MODES.FIFTEEN_MINUTES, '15分钟'],
  [STORAGE_MODES.HOUR, '小时'],
  [STORAGE_MODES.DAY, '日'],
  [STORAGE_MODES.MONTH, '月'],
  [STORAGE_MODES.YEAR, '年'],
]

function getLabel(t: STORAGE_MODES): string {
  const target = STORAGE_MODES_OPTIONS.find(
    item => item.value === t,
  )
  return target?.label || ''
}
function checked(t: STORAGE_MODES) {
  return !!checkedText(t)
}
function checkedText(t: STORAGE_MODES): string {
  const m = props.mode
  if (m.collect.includes(t))
    return '采集'
  if (m.entry.includes(t))
    return '录入'
  if (m.calculate.includes(t))
    return '计算公式'
  if (m.statistic.includes(t))
    return '统计公式'
  return ''
}
function checkedColor(t: STORAGE_MODES) {
  const txt = checkedText(t)
  if (txt === '采集')
    return 'bg-green-500'
  if (txt === '录入')
    return 'bg-blue-500'
  if (txt === '计算公式')
    return 'bg-yellow-500'
  if (txt === '统计公式')
    return 'bg-purple-500'
  return null
}
</script>

<template>
  <div class="min-w-[100px] flex border rounded-sm">
    <div v-for="(item, index) in TIME_TYPES" :key="item[0]" class="flex-1">
      <div
        class="fs-12 border-left border-bottom bg-gray-100 text-center dark:bg-gray-8"
        :class="{ '!border-l-0': index === 0 }"
      >
        {{ item[1] }}
      </div>
      <div
        class="border-left w-fill h-6 flex items-center justify-center"
        :class="{ '!border-l-0': index === 0 }"
      >
        <ElTooltip v-if="checked(item[0])" :content="checkedText(item[0])" placement="top">
          <span
            block :class="checkedColor(item[0])" w="2" h="2"
            class="rounded-full"
          />
        </ElTooltip>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
